<template>
    <header class="header w">
        <div class="logo">
          <img class="imgtop" :src="require('@/assets/icon.png')" alt="图片不见啦"/>
        </div>
        <div class="nav">
          <ul>
            <li>
              <a href="#">全部</a>
            </li>
            <li>
              <a href="#">课程</a>
            </li>
            <li>
              <a href="#">问答</a>
            </li>
            <li>
              <a href="#">资源</a>
            </li>
            <li>
              <a href="#">考试</a>
            </li>
            </ul>
        </div>
        <div id="search">
        <el-input placeholder="请输入搜索内容"  id="inputsearch">
          <el-select v-model="select" slot="prepend" style="width:100px" placeholder="选项">
      <el-option label="课程" value="1"></el-option>
      <el-option label="学号" value="2"></el-option>
      <el-option label="笔记" value="3"></el-option>
    </el-select>
    <el-button id="btn_search" slot="append" icon="el-icon-search">搜索</el-button>
    </el-input>
    </div>
      <router-link to="/page2/" target="_blank" id="center">课程中心</router-link>
    <div class="mobile">
      <img :src="require('@/assets/mobile.png')" alt="图片不见啦">
        <a href="#">客户端</a>
      </div>
    <div class="user">
      欢迎你,嵩天
        <img :src="require('@/assets/head.png')" alt="图片不见啦"/>
      </div>
    </header>
  </template>
  
  <script>
   export default {
    name: 'HeaderTop',
    data(){
      return {
        select:undefined,
        msg:undefined
    }
  },
  }
  </script>
  
  <style scoped>
  .header {
    width: 1440px;
    margin: auto;
    text-align: left;
  }
  .w{
    height: 80px;
    margin:30px auto;
    /* background-color: #ff00ff; */
  }
  .logo {
    float: left;
    width:200px;
    height:80px;
    /* background: #00ffff; */
    background-image: "../assets./imgpac.png";
  }
  .nav{
    float: left;
    margin-left:300px;
  }
  .nav ul li{
    margin-top:-15px;
    float: left;
    list-style: none

  }
  .nav ul li a{
    padding: 0 20px;
    display: block;
    height:20px;
    text-decoration: none;
  }
  .nav ul li a:hover{
    background-color:grey;
    color:blue;
  }
  .imgtop{
    margin-top:2px
  }
  #search{
    margin-left:320px;
    margin-top:10px;
    float: left;
    line-height:30px;
    width:450px;
  }

  #btn_search{
    background-color:brown;
    color:black;
  }
  .user{
    margin-top:4px;
    float:right;
  }
  .user img{
    vertical-align:middle;
  }
  .mobile{
    float:left;
    margin-left:70px;
  }
  .mobile img{
    width:40px;
    height:40px;
    vertical-align:middle;
  }
  .mobile a{
    text-decoration:none;

  }
  .mobile a:hover{
    background-color:grey;
    color:blue;
  }
  a#center{
    float:left;
    width:fit-content; 
    border-radius:4px;
    padding: 5px;
    height:fit-content;
    line-height:fit-content;
    size: 35px;
    color:white;
    background-color:rgba(65, 6, 6, 0.795);
    margin-left:80px;
    margin-top:10px;
    text-decoration: none;
  }
  a#center:hover{
    text-decoration:dashed;
    color: red;
    background-color:skyblue;
  }
  </style>


  